<template>
  <div class="fencengtu-pic-parent">
      <div class="fencengtu-pic" :model="layerPic" 
        :style="{
            backgroundImage: 'url(' + layerPic + ')', 
            backgroundSize:'100% 100%',
            backgroundRepeat:'no-repeat'
        }">
        <el-popover
          v-for="item in markData"
          :key="item.id"
          placement="top-start"
          trigger="hover"
          :title="item.markersName">
          <div v-for="i in item.rtObjs" class="text item" :key="i.rtObjName">
            <div v-if = "i.rtTypeId == 1">
               物联设备-{{ i.rtObjName }}
            </div>
            <div v-if = "i.rtTypeId == 2">
               资产-{{ i.rtObjName }} 
            </div>
            <div v-if = "i.rtTypeId == 3">
               视频-{{ i.rtObjName }} 
            </div>
            <div v-if = "i.rtTypeId == 4">
               巡检点位-{{ i.rtObjName }} 
            </div>
          </div>
          <img slot="reference"
            v-if ="item.iconUrl"
            :src="item.iconUrl"
            :style="{
              width:( markerW * zoomPercent ) +'px',
              height:( markerH * zoomPercent ) +'px',
              position:'absolute',
              left:item.xAxis + '%',
              top:item.yAxis + '%',
              cursor:'pointer',
              marginTop:'-' + ( markerW * zoomPercent )/2 + 'px',
              marginLeft:'-' + ( markerW * zoomPercent )/2 + 'px',
              borderRadius:( markerW * zoomPercent )/2 + 'px',
              zIndex:2
            }"/>   
        </el-popover>
        <img v-for="item in markData" 
            :key ="item.alarmIcon"
            :src="item.alarmIcon"
            v-if ="item.alarmIcon"
            :style="{
              width:( markerAlarmW * zoomPercent ) +'px',
              height:( markerAlarmH * zoomPercent ) +'px',
              position:'absolute',
              left:item.xAxis + '%',
              top:item.yAxis + '%',
              cursor:'pointer',
              marginTop:'-' + ( markerAlarmW * zoomPercent )/2 + 'px',
              marginLeft:'-' + ( markerAlarmW * zoomPercent )/2 + 'px',
              borderRadius:( markerAlarmW * zoomPercent )/2 + 'px',
              zIndex:1
        }"/>
      </div>
  </div>
</template>

<script>

import { getPicturesLayeredList,getFbsIconPercent } from '@/api/layeredGraph'

export default {
  name:'LayerContain',
  data () {
    return {
      msg: '展示分层图',
      zoomPercent:1,
      markerW:32,
      markerH:32,      
      markerAlarmW:40,
      markerAlarmH:40,
  	}
  },
  props:{
    layerPic:{
      type: String,
      required: true
    },    
    treeData:{
      required: true
    },    
    iconSize:{
      required: true
    },     
    addNewMark:{
      required: true
    },
    saveNewFlag:{
      required: true
    }, 
    isDelete:{
      required: true
    },
    markData:{
      required: true
    }       
  },
  watch:{
    layerPic(value){
      if(value){
        this.layerPic = value;
      }
    },
    iconSize(value){
      if(value){
        this.zoomPercent = value / 100;
      }
    },
    addNewMark(val){
      if(val.length > 0){
          let newArr = val.filter(o => o.id == 0);
          //大图标点之后
          if(newArr.length > 0){
              this.markData = val;
          }
      }
    },
    saveNewFlag(val){
    },
    isDelete(val){
    }
  },
  methods:{}
}
</script>

<style lang="less">
.fencengtu-pic-parent{
  width: 100%;
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  .fencengtu-pic {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
}
</style>
